<!--
* @author wn
* @date 2022/06/22 11:42:08
* @description: 商品详情   与 评价 组件
!-->
<template>
	<div class="goods-tabs">
		<!-- tabs -->
		<nav>
			<a
				href="javascript:;"
				@click="activeContent = 'GoodsDetail'"
				:class="{ active: activeContent === 'GoodsDetail' }"
			>
				商品详情
			</a>
			<a
				href="javascript:;"
				@click="activeContent = 'GoodsComment'"
				:class="{ active: activeContent === 'GoodsComment' }"
			>
				商品评价
				<span>
					({{ good.commentCount > 999 ? '999+' : good.commentCount }})
				</span>
			</a>
		</nav>
		<!-- 切换内容 component is 根据 组件名称 切换
    GoodsDetail GoodsComment
    否则 根据  v-if  切换
    如果想要切换回来时还保留之前状态  可以用 keep-alive 组件包裹
    -->
		<component :is="activeContent"></component>
	</div>
</template>
<script>
import { inject, ref } from 'vue'
import GoodsDetail from './GoodsDetail'
import GoodsComment from './GoodsComment'

export default {
	name: 'GoodsTabs',
	components: { GoodsDetail, GoodsComment },
	setup() {
		// component is 根据 组件名称 切换
		const activeContent = ref('GoodsDetail')
		// 依赖注入  good  获取  评价数量
		const good = inject('good')
		return { activeContent, good }
	},
}
</script>
<style scoped lang="less">
.goods-tabs {
	min-height: 600px;
	background: #fff;
	nav {
		height: 70px;
		line-height: 70px;
		border-bottom: 1px solid #f5f5f5;
		a {
			display: inline-block;
			position: relative;
			padding: 0 40px;
			font-size: 18px;
			span {
				color: @priceColor;
				font-size: 16px;
				margin-left: 10px;
			}
			&:first-child {
				border-right: 1px solid #f5f5f5;
			}
			&.active {
				&::before {
					position: absolute;
					left: 40px;
					bottom: -0.5px;
					content: '';
					width: 72px;
					height: 2px;
					background: @xtxColor;
				}
			}
		}
	}
}
</style>
